<template>
<!--账务大类-->
  <div>
    <div class="account-big-type-box">
      <div style="display: flex;padding-left: 15px;padding-top: 11px;height: 30px" >
        <a  href="#">
          <div style="display: flex"  >
            <i class="icon-xitongzhangwu" style="margin-top: 5px;margin-right: 5px;margin-left: 5px"></i>
            <h3>账务大类展示&nbsp;&nbsp;&nbsp;</h3>
          </div>
        </a>
        <el-select v-model="isPayOrTake"style="width: 100px" size="mini" placeholder="请选择" @change="changeGroup">
          <el-option label="所有" :value=0 ></el-option>
          <el-option label="支出" :value=1 ></el-option>
          <el-option label="收入" :value=2></el-option>
        </el-select>
      </div>
        <div class="account-big-type-box-detail">
          <el-table
            v-loading="loading"
            element-loading-text="已经很努力加载了(•́へ•́╬)"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :data="dataList"
            style="width: 100%"
            height="552"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              label="类型"
              align="center"
              width="450">
              <template slot-scope="scope">
               <el-tag  v-if="scope.row.isPayOrTake===1" ><span >支出</span></el-tag>
               <el-tag  v-if="scope.row.isPayOrTake===2" type="danger" ><span >收入</span></el-tag>

              </template>
            </el-table-column>
            <el-table-column
              label="大类名称"
              align="center"
              width="500">
              <template slot-scope="scope">
                <span  style="font-weight: bold">{{scope.row.bigAccountName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="修改"
              align="center"
            >

              <template slot-scope="scope">
                <el-button icon="icon-xiugaimima" size="small" type="success">&nbsp;修改</el-button>
              </template>
            </el-table-column>
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
          </el-table>
          <div   style="position: relative">
            <el-pagination
              style="margin-top: 5px"
              align="center"
              :page-size="pageSize"
              :current-page="currentPage"
              background
              @current-change="changePage"
              layout="prev, pager, next"
              :total=total>
            </el-pagination>
            <div style="position: absolute;right: 10px;top: 3px">
              <el-button size="mini" type="primary" >批量删除</el-button>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import {get} from "../../utils/request";
import {ACCOUNT_SHOW_DATA} from "../../utils/basic-data";

export default {
  name: "AccountBigType",
  data(){
    return{
      multipleSelection:[],
      dataList:[],
      pageSize:ACCOUNT_SHOW_DATA,
      currentPage:1,
      total:0,
      isPayOrTake:0,
      loading:true
    }
  },
  created() {
    this.currentPage=1
  },
  mounted() {
    get('/api/v1/bigaccount/find',{now:this.currentPage,size:this.pageSize}).then(resp=>{
      this.dataList=resp.data.objectList
      this.total=resp.data.total
      this.currentPage=resp.data.currenPage
      this.loading=false
    })
  },
  methods:{
    changeGroup(value){
      this.loading=true
      this.currentPage=1
      get('/api/v1/bigaccount/find',{now:this.currentPage,size:this.pageSize,isPayTakeId:value}).then(resp=>{
        this.dataList=resp.data.objectList
        this.total=resp.data.total
        this.currentPage=resp.data.currenPage
        this.loading=false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changePage(value){
      this.loading=true
      get('/api/v1/bigaccount/find',{now:value,size:this.pageSize,isPayTakeId:this.isPayOrTake}).then(resp=>{
        this.dataList=resp.data.objectList
        this.total=resp.data.total
        this.currentPage=resp.data.currenPage
        this.loading=false
      })
    }
  }

}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.account-big-type-box-detail{
  padding-top: 20px;
  width: 1260px;
  margin-left: 15px;
  height: 600px;
  border-radius: 20px;
  background-color: #f2f2f2;
}
a{
  text-decoration: none;
  color: #2c3e50;
}
h3{
  margin: 0;
}
.account-big-type-box{
  height: 674px;

  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
